<style lang="less">
@import 'loanReviewTask.less';
</style>
<template>
  <div class="search">
    <Row v-if="isShowTaskList">
      <Col>
      <Card>
        <Row class="operation">
          <Button @click="batchProcess" type="primary" icon="ios-done-all">批量通过</Button>
          <Button @click="setLock('yes')" type="primary" icon="md-lock">锁定</Button>
          <Button @click="setLock('no')" type="primary" icon="ios-unlock">解锁</Button>
          <Button @click="addTags" type="primary" icon="md-pricetags">打标签</Button>
        </Row>
        <Row>
          <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
            <Form-item label="申请编号" prop="applyNo">
              <Input type="text" v-model="searchForm.applyNo" clearable placeholder="请输入申请编号" style="width: 200px" />
            </Form-item>
            <Form-item label="客户姓名" prop="custName">
              <Input type="text" v-model="searchForm.custName" clearable placeholder="请输入客户姓名" style="width: 200px" />
            </Form-item>
            <span v-if="drop">
              <Form-item label="合作商名称" prop="dealerName">
                <Input v-model="searchForm.dealerName" type="text" placeholder="请输入合作商名称" style="width:200px" />
              </Form-item>
              <Form-item label="渠道类型" prop="channelType">
                <Select v-model="searchForm.channelType" clearable placeholder="请选择渠道类型" style="width:200px">
                  <Option v-for="item in dataDic.channelType" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                </Select>
              </Form-item>
              <Form-item label="业务分类" prop="businessType">
                <Select v-model="searchForm.businessType" clearable placeholder="请选择业务分类" style="width:200px">
                  <Option v-for="item in dataDic.confBusinessType" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                </Select>
              </Form-item>
              <Form-item label="车辆属性" prop="carNature">
                <Select v-model="searchForm.carNature" clearable placeholder="请选择车辆属性" style="width:200px">
                  <Option v-for="item in dataDic.carNature" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                </Select>
              </Form-item>
              <Form-item label="车辆类型" prop="carType">
                <Select v-model="searchForm.carType" clearable placeholder="请选择车辆类型" style="width:200px">
                  <Option v-for="item in dataDic.carType" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                </Select>
              </Form-item>
              <Form-item label="运营方式" prop="operateWay">
                <Select v-model="searchForm.operateWay" clearable placeholder="请选择运营方式" style="width:200px">
                  <Option v-for="item in dataDic.operateWay" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                </Select>
              </Form-item>
              <Form-item label="挂靠方式" prop="affiliatedWay">
                <Select v-model="searchForm.affiliatedWay" clearable placeholder="请选择挂靠方式" style="width:200px">
                  <Option v-for="item in dataDic.affiliatedWay" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                </Select>
              </Form-item>
              <Form-item label="放款模式" prop="lendingMode">
                <Select v-model="searchForm.lendingMode" clearable placeholder="请选择放款模式" style="width:200px">
                  <Option v-for="item in dataDic.lendingMode" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                </Select>
              </Form-item>
              <Form-item label="放款申请时间">
                <DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
              </Form-item>
              <Form-item label="车辆品牌" prop="brandCode">
                <Select v-model="searchForm.brandCode" clearable placeholder="请选择放款模式" style="width:200px">
                  <!--TODO 待补充车辆品牌下拉列表-->
                </Select>
              </Form-item>
              <Form-item label="优先级" prop="priority">
                <Select v-model="searchForm.priority" clearable placeholder="请选择优先级" style="width:200px">
                  <Option v-for="item in dataDic.priority" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                </Select>
              </Form-item>
              <Form-item label="案件标记" prop="caseLabel">
                <Input type="text" v-model="searchForm.caseLabel" clearable placeholder="请输入案件标记" style="width: 200px" />
              </Form-item>
            </span>
            <Form-item style="margin-left: -35px;" v-if="dropDownContent=='展开'">
              <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
              <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
              <a class="drop-down" @click="dropDown">{{dropDownContent}}
                <Icon :type="dropDownIcon"></Icon>
              </a>
            </Form-item>
            <Form-item style="margin-left: -65px;width:100%;text-align: center;" v-if="dropDownContent=='收起'">
              <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
              <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
              <a class="drop-down" @click="dropDown">{{dropDownContent}}
                <Icon :type="dropDownIcon"></Icon>
              </a>
            </Form-item>
          </Form>
        </Row>
        <Row>
          <Table v-bind:loading="loading" border v-bind:columns="columns" v-bind:data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table">
            <template slot-scope="{row,index}" slot="action">
              <Button style="margin-right:5px" type="primary" size="small" @click="showLogs(row)">查看日志</Button>
              <Button style="margin-right:5px" type="primary" size="small" @click="disable(row)">改派</Button>
            </template>
            <template slot-scope="{row , index}" slot="businessStateIn">
              <span>{{setbusinessStateInTitle(row.businessStateIn)}}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="tag">
              <Tag v-for="item in row.labelList" :color="item.labelColor">{{item.labelName}}</Tag>
            </template>
            <template slot-scope="{ row, index }" slot="applyNo">
              <a type="primary" size="small" @click="showLoanReview(row)">{{row.applyNo}}</a>
            </template>
          </Table>
        </Row>
        <Row type="flex" justify="end" class="page">
          <Page v-bind:current="searchForm.pageNumber" v-bind:total="total" v-bind:page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" v-bind:page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal v-model="makeLoanLabelVisible" :title="modalTitle" :closable="false" :width="550" :mask-closable="false" :footerHide="true" :draggable="true">
      <makeLoanLabel v-show="makeLoanLabelVisible" ref="selectLabel" :appno="applyNo" @cancel="cancel"></makeLoanLabel>
    </Modal>
    <approve-record v-model="recordVisible" ref="approveRecord" :applyNo="applyNoParam" />
    <modal v-model="lockFormVisible" ref="lockOptionModel" :label-width="80" :title="modalTitle" :closable="false" :mask-closable='false' :width="600" :styles="{top: '180px'}">
      <div slot="footer">
        <Button type="text" @click="cancelLock">取消</Button>
        <Button type="primary" @click="submitLock">提交</Button>
      </div>
      <Row>
        <Form ref="lockOptionForm" :model="lockOptionForm" inline :label-width="80" class="search-form" :rules="formValidate">
          <Form-item v-if="lockOptionStatus=='yes'" label="锁定原因" prop="processRemark">
            <Input type="textarea" v-model="lockOptionForm.processRemark" clearable placeholder="请输入锁定原因" style="width: 450px;height: 50px;" />
          </Form-item>
          <Form-item v-if="lockOptionStatus=='no'" label="解锁原因" prop="processRemark">
            <Input type="textarea" v-model="lockOptionForm.processRemark" clearable placeholder="请输入解锁原因" style="width: 450px;height: 50px;" />
          </Form-item>
        </Form>
      </Row>
    </modal>
    <!--显示案件审批详情页-->
    <LoanReview v-if="isShowLoanReview" :detailParams="detailParams" @backGo="backGo">
    </LoanReview>
  </div>
</template>

<script>
import LoanReview from '@/projects/afs-core-business/pages/case/approve/loan-audit/loanReview.vue'
import { getByTypes } from '_p/basic/api/admin/datadic'
import {
    getLoanReviewTaskList,
  modifyLock
} from '@/projects/afs-core-business/api/afs-case/loan-approve/loanApproveTask'
//引打标签vue
import makeLoanLabel from '../make-label/makeLoanLabel'
//根据申请编号获取一打标签
import { queryAllLoanLabelByApplyNo } from '@/projects/afs-core-business/api/afs-case/make-label/makeLoanLabel'
//获取所有标签信息
import { getAllLabelList } from '@/projects/afs-core-business/api/afs-case/manual-label/manualLabel'
import approveRecord from '../approve-record/approve-record'
export default {
  name: 'loanApproveTask',
  components: {
    approveRecord,
    makeLoanLabel,
    LoanReview
  },
  /*mounted() {
    this.init()
  },*/
    activated() {
        this.init()
    },
  data() {
    return {
      loading: true,
      operationLoading: false,
      importLoading: false,
      loadingExport: true,
      isShowTaskList: true,
      isShowLoanReview: false,
      recordVisible: false,
      makeLoanLabelVisible: false,
      modalTitle: '标签信息',
      taskId: '',
      applyNo: '',
      detailParams:{
        applyNo:'',
        taskId:''
      },
      applyNoParam: '',
      drop: false,
      locationData: [],
      dropDownContent: '展开',
      dropDownIcon: 'ios-arrow-down',
      dicKeys: [
        'confBusinessType',
        'loanBusinessStateIn',
        'carType',
        'carNature',
        'operateWay',
        'affiliatedWay',
        'lendingMode',
        'channelType'
      ],
      confBusinessType: [],
      loanBusinessStateIn: [],
      carType: [],
      carNature: [],
      operateWay: [],
      affiliatedWay: [],
      lendingMode: [],
      channelType: [],
      dataDic: {},
      selectCount: 0,
      selectList: [],
      viewImage: false,
      deptId: [],
      selectDep: [],
      department: [],
      dataDep: [],
      searchKey: '',
      selectDate: null,
      searchForm: {
        applyNo: '',
        custName: '',
        dealerName: '',
        businessStateIn: '',
        carNature: '',
        carType: '',
        operateWay: '',
        affiliatedWay: '',
        lendingMode: '',
        lendingStartDate: '',
        lendingEndDate: '',
        tag: '',
        pageNumber: 1,
        pageSize: 10
      },
      submitLoading: false,
      isLock: [],
      lockFormVisible: false,
      lockOptionStatus: '',
      lockOptionForm: {
        processRemark: ''
      },
      formValidate: {
        processRemark: [
          { required: true, message: '备注不能为空', trigger: 'blur' }
        ]
      },
      columns: [
        {
          type: 'selection',
          minWidth: 60,
          maxWidth: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '操作',
          key: 'action',
          minWidth: 200,
          align: 'center',
          fixed: 'right',
          slot: 'action'
        },
          {
              title: '案件状态',
              key: 'businessStateIn',
              minWidth: 120,
              fixed: 'left'
          },
        {
          title: '客户姓名',
          key: 'custName',
          minWidth: 100,
          fixed: 'left',
          tooltip: true //显示提示
        },
        {
          title: '合作商名称',
          key: 'dealerName',
          minWidth: 100,
          fixed: 'left'
        },
        {
          title: '案件标记',
          key: 'labelList',
          minWidth: 120,
          slot: 'tag'
        },
          {
              title: '申请编号',
              key: 'applyNo',
              minWidth: 120,
              fixed: 'left',
              tooltip: true, //显示提示
              slot: 'applyNo'
          },
        {
          title: '车辆品牌',
          key: 'brandCode',
          minWidth: 100,
          fixed: 'left'
        },
        {
          title: '业务分类',
          key: 'businessType',
          minWidth: 100,
          fixed: 'left'
        },
        {
          title: '放款模式',
          key: 'lendingMode',
          minWidth: 100,
          fixed: 'left'
        },
        {
          title: '优先级',
          key: 'priority',
          minWidth: 70,
          fixed: 'left'
        },
        {
          title: '放款申请时间',
          key: 'lendingFirstDate',
          minWidth: 130,
          fixed: 'left'
        },
        {
          title: '欺诈风险',
          key: 'fraudInfo',
          minWidth: 100,
          fixed: 'left'
        }
      ],
      data: [],
      total: 0
    }
  },

  methods: {
    init() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getTaskList()
      this.initDataDic()
      this.queryLabelData()
    },
    initDataDic() {
      let self = this
      getByTypes(this.dicKeys).then(res => {
        if (res.code === '0000' && res.data) {
          self.dataDic = res.data
          this.confBusinessType.push(...res.data.confBusinessType)
          this.loanBusinessStateIn.push(...res.data.loanBusinessStateIn)
          this.carType.push(...res.data.carType)
          this.carNature.push(...res.data.carNature)
          this.operateWay.push(...res.data.operateWay)
          this.affiliatedWay.push(...res.data.affiliatedWay)
          this.lendingMode.push(...res.data.lendingMode)
          this.channelType.push(...res.data.channelType)
        }
      })
    },
    setbusinessStateInTitle(val) {
      let dic = {}
      this.dataDic.loanBusinessStateIn.forEach(colunm => {
        if (colunm.value === val) {
          dic = colunm
        }
      })
      return dic.title
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.lendingStartDate = v[0]
        this.searchForm.lendingEndDate = v[1]
      }
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getTaskList()
    },
    dropDown() {
      if (this.drop) {
        this.dropDownContent = '展开'
        this.dropDownIcon = 'ios-arrow-down'
      } else {
        this.dropDownContent = '收起'
        this.dropDownIcon = 'ios-arrow-up'
      }
      this.drop = !this.drop
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.selectDate = null
      this.searchForm.lendingStartDate = ''
      this.searchForm.lendingEndDate = ''

      // 重新加载数据
      this.getTaskList()
    },
    seizeTask() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.selectDate = null
      this.searchForm.lendingStartDate = ''
      this.searchForm.lendingEndDate = ''
    },
    getTaskList() {
      this.loading = true
        getLoanReviewTaskList(this.searchForm).then(res => {
        this.loading = false
        if (res.code === '0000') {
          this.data = res.data.records
          this.total = res.data.total
        }
      })
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false)
    },
    changeSort(e) {
      this.searchForm.sort = e.key
      this.searchForm.order = e.order
      if (e.order === 'normal') {
        this.searchForm.order = ''
      }
      this.getTaskList()
    },
    showSelect(e) {
      this.selectList = e
      this.selectCount = e.length
    },
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getTaskList()
      this.clearSelectAll()
    },
    changePageSize(v) {
      this.searchForm.pageSize = v
      this.getTaskList()
    },
    showLoanReview(param) {
      this.isShowTaskList = false
      this.isShowLoanReview = true
      this.detailParams.taskId = param.id
      this.detailParams.applyNo = param.applyNo
    },
    queryLabelData() {
      this.load = true
      this.searchForm.label = 'manual'
      this.searchForm.status = 'takeEffect'
      getAllLabelList(this.searchForm).then(res => {
        this.load = false
        if (res.code === '0000') {
          this.locationData = res.data.records
        }
      })
    },
    hasSelected() {
      if (this.selectCount == 0) {
        this.$Message.warning('需先勾选数据行!')
        return false
      } else {
        return true
      }
    },
    existsCurrentStatus(type, status) {
      let currentStatusNum = 0
      this.selectList.forEach(record => {
        if (type == '1') {
          if (record.isLock == status) {
            currentStatusNum++
          }
        }
      })
      return currentStatusNum > 0
    },
    backGo() {
      this.isShowTaskList = true
      this.isShowLoanReview = false
      this.getTaskList()
    },
    showLogs(v) {
      this.applyNoParam = v.applyNo
      this.recordVisible = true
    },
    //锁定、解锁
    setLock(status) {
      if (this.hasSelected()) {
        if (this.existsCurrentStatus('1', status)) {
          this.$Message.warning(
            '已选择数据存在' +
              (status == 'yes' ? '已锁定' : '非锁定') +
              '数据，请去除勾选后再操作'
          )
        } else {
          if (status == 'yes') {
            this.modalTitle = '锁定操作备注'
          } else {
            this.modalTitle = '解锁操作备注'
          }
          this.lockOptionStatus = status
          this.lockFormVisible = true
        }
      }
    },
    //备注提交
    submitLock() {
      let validResult = true
      this.$refs.lockOptionForm.validate(valid => {
        if (!valid) {
          this.$Message.error('数据不合规，请检查数据项')
          validResult = false
        }
      })
      if (validResult) {
        this.operationLoading = true
        this.loading = true
        let data = []
        this.selectList.forEach(function(e) {
          data += e.applyNo + ','
        })
        modifyLock({
          data: data,
          lockRemark: this.lockOptionForm.processRemark,
          status: this.lockOptionStatus
        }).then(res => {
          if (res.code == '0000') {
            this.$Message.success('操作成功')
            this.getTaskList()
          }
        })
        this.loading = false
        this.cancelLock()
        this.operationLoading = false
      }
    },
    cancelLock() {
      this.lockFormVisible = false
      this.lockOptionForm.processRemark = ''
    },
    //取消
    cancel() {
      this.makeLoanLabelVisible = false
      this.getTaskList()
    },
    batchProcess() {
      this.$Message.info('功能未实现')
      //TODO 待实现批量审批
    },
    addTags() {
      if (this.selectCount <= 0 || this.selectCount == undefined) {
        this.$Message.warning('您还未选择数据')
        return
      } else if (this.selectCount > 1) {
        this.$Message.warning('请勾选单条数据操作')
        return
      }
      this.modalTitle = '案件打标签'
      let applyNoTemp = ''
      this.selectList.forEach(function(e) {
        applyNoTemp = e.applyNo
      })
      this.applyNo = applyNoTemp
      this.makeLoanLabelVisible = true
      queryAllLoanLabelByApplyNo(this.applyNo).then(res => {
        if (res.code === '0000') {
          this.$refs.selectLabel.getSelectLabel(res.data)
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
